<template>
	<view class="container">
		<!-- <view style="padding: 0 120upx 12upx;">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#007AFF"></uni-segmented-control>
		</view> -->
		<view class="list">
			<view class="list_head">
				<view class="changDate" @click="open">
					{{dataTxt}}
					<uni-icons type="arrowdown"></uni-icons>
				</view>
			</view>
			<view v-if="list.length > 0" class="list_data">
				<view v-for="(item,index) in list" :key="index" @click="toDetail(item)" class="s_card radius list_item">
					<view class="paytype">
						<image v-if="item.payType == 1" class="paytype_icon" src="../../../static/images/hotWater/pay_card.png" mode="scaleToFill"></image>
						<!-- #ifdef MP-ALIPAY -->
						<image v-else class="paytype_icon" src="../../../static/images/hotWater/pay_mypay.png" mode="scaleToFill"></image>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<image v-else class="paytype_icon" src="../../../static/images/hotWater/pay_wechat.png" mode="scaleToFill"></image>
						<!-- #endif -->
					</view>
					<view class="consume_left">
						<view>热水消费</view>
						<view v-if="current == 0" class="consume_addr"> {{ item.orgName }}{{ item.deviceNo + "水控机"}}</view><!-- <uni-icons color="#999" size="20" type="location-filled"></uni-icons> -->
						<view class="consume_date" v-if="item.payTime!=null"> {{item.payTime}}</view><!-- <uni-icons color="#999" size="20" type="location-filled"></uni-icons> -->
					</view>
					<view class="consume_right">
						<view class="consume">{{(item.payTime!=null?'-':'') + item.advanceAmount}}</view>
						<view v-if="current == 0 && item.refundStatus == 2 && item.refundAmount > 0" class="refundAmount">{{'已退款' + item.refundAmount + '元'}}</view>
						<view v-else-if="item.refundStatus == 2 && item.refundAmount > 0" class="refundAmount">{{'已退款' + item.refundAmount + '元'}}</view>
						<view v-else-if="item.payTime==null && item.payStatus == 1" class="refundAmount">未支付订单</view>
					</view>
					<view>
						<uni-icons type="arrowright" size="22"></uni-icons>
					</view>
				</view>
			</view>
			<view v-else class="no_result">
				<image src="../../../static/images/hotWater/no_data.jpg" mode="scaleToFill"></image>
				<view class="no_result_txt"><text>并无相关数据</text></view>
			</view>
		</view>
		<!-- 底部选择日期弹窗 -->
		<uni-popup ref="showDate" type="bottom" @change="change">
			<view class="uni-share">
				<text class="uni-share-title">选择日期</text>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
				</picker-view>
				<view class="uni-share-btn">
					<text class="" @click="confirm('share')">确认</text>
					<text class="" @click="cancel('share')">取消</text>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	let _this
	import {
		queryOrderList,
		queryNBConsumeLog
	} from '../../../common/api/hot_water.js'
	import {
		mGetDate,
		dateFtt,
		isNull,
		isDef
	} from '../../../common/js/utils.js'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			return {
				years,
				year,
				months,
				month,
				value: [9999, month - 1],
				visible: true,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				list: [],
				gmtCreateStart: dateFtt("yyyy-MM", new Date()) + "-01 00:00:00", //初始查询开始时间
				gmtCreateEnd: dateFtt("yyyy-MM", new Date()) + "-" + mGetDate() + " 23:59:59", //初始查询结束时间
				user: uni.getStorageSync('userInfo'),
				current: 0,
				currentPage: 1,
				// #ifdef MP-WEIXIN
				items: ['微信', 'IC卡记录'],
				// #endif
				// #ifdef MP-ALIPAY
				items: ['支付宝', 'IC卡记录']
				// #endif
			}
		},
		methods: {
			getBill() {
				if (this.current == 0) {
					// #ifdef MP-WEIXIN
					this.billWeCath()
					// #endif
					// #ifdef MP-ALIPAY 
					this.billWeCath()
					// #endif
				} else {
					this.billIcCard()
				}
			},
			billWeCath() {
				queryOrderList({
					userId: this.user.userId,
					orgId: this.user.orgId,
					empId: this.user.empId,
					gmtCreateStart: _this.gmtCreateStart,
					gmtCreateEnd: _this.gmtCreateEnd,
					pageSize: 30,
					currentPage: _this.currentPage
				}).then(res => {
					if (res.code == 0) {
						_this.list.push(...res.data.list)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			billMyPay() {

			},
			billIcCard() {
				if (isDef(this.user.icCardNo)) {
					queryNBConsumeLog({
						"cardNo": this.user.icCardNo,
						"currentPage": this.currentPage,
						"empId": this.user.empId,
						"endDate": this.gmtCreateEnd,
						"orgId": this.user.orgId,
						"pageSize": 10,
						"startDate": this.gmtCreateStart,
					}).then(res => {
						// console.log(res)
						if (res.resultCode == 0) {
							_this.list.push(...res.nbConsumeLogList)
						} else {
							uni.showModal({
								title: '提示',
								content: res.resultMsg,
								confirmColor: "#007AFF",
								showCancel: false
							});
						}
					}).catch(err => {
						uni.showModal({
							title: '提示',
							content: err,
							confirmColor: "#007AFF",
							showCancel: false
						});
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您并没有绑定IC卡，所以并没有IC卡的消费记录',
						confirmText: "前往绑定",
						confirmColor: "#007AFF",
						success: function(res) {
							if (res.confirm) {
								_this.current = 0
								uni.navigateTo({
									url: '/pages/me/bindICcard'
								})
							}
						}
					});
				}
			},
			bindChange(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				// _this.gmtCreateStart = this.year + '-' + (this.month>10?'0':'') + this.month + '-01'
				// _this.gmtCreateEnd = this.year + '-' + (this.month>10?'0':'') + this.month + '-' + mGetDate(this.year,this.month)
				_this.gmtCreateStart = dateFtt("yyyy-MM", new Date(this.year + '-' + this.month)) + "-01 00:00:00"
				_this.gmtCreateEnd = dateFtt("yyyy-MM", new Date(this.year + '-' + this.month)) + '-' + mGetDate(this.year, this.month) +
					" 23:59:59"
			},
			open() {
				this.$nextTick(() => {
					this.$refs.showDate.open()
				})
			},
			confirm(type) {
				_this.list = [];
				_this.getBill()
				this.$refs.showDate.close()
			},
			cancel(type) {
				this.$refs.showDate.close()
			},
			change(e) {
				console.log('是否打开:' + e.show)
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
				this.list = []
				this.currentPage = 1
				this.getBill()
			},
			toDetail(detail){
				uni.navigateTo({
					url: './detail?detail=' + JSON.stringify(detail)
				})
			}
		},
		onLoad() {
			_this = this;
			_this.user = JSON.parse(uni.getStorageSync('userInfo'))
			_this.getBill()
		},
		computed: {
			dataTxt() {
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				if (this.year == year) {
					if (this.month == month) {
						return '本月'
					} else {
						return `${this.month}月`
					}
				} else {
					return this.year + '年' + this.month + '月'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #F1F0F5;
		height: 100vh;
	}
	.list {
		.list_head {
			padding: 12upx 24upx 24upx;

			.changDate {
				display: inline-block;
				padding: 12upx 24upx;
				background-color: #FFF;
				border-radius: 6upx;
			}
		}

		.list_data {
			.list_item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.consume_left,
				.paytype,
				.consume_right {
					display: flex;
					flex-direction: column;
					line-height: 46upx;
					.paytype_icon{
						width: 80rpx;
						height: 80rpx;
					}
					.consume_date,
					.consume_addr {
						font-size: 24upx;
					}

					.consume_date {
						color: #999;
					}

					.consume {
						text-align: right;
						padding: 0 24upx;
						font-size: 40upx;
						font-weight: bolder;
					}

					.refundAmount {
						font-size: 24upx;
						color: #E74C3C;
					}
				}
				.consume_left{
					width: 66%;
				}
				.paytype{
					width: 18%;
				}
				.consume_right{
					width: 26%;
				}
			}
		}
	}

	.uni-share {
		display: flex;
		flex-direction: column;
		background-color: #FFF;
		border-top-right-radius: 36upx;
		border-top-left-radius: 36upx;

		picker-view {
			width: 100%;
			height: 600rpx;
			margin-top: 20rpx;
		}

		.item {
			line-height: 100rpx;
			text-align: center;
		}

		.uni-share-btn,
		.uni-share-title {
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bolder;
			border-bottom: 1px #f5f5f5 solid;
			text-align: center;
			color: #333;
		}

		.uni-share-btn {
			;
			display: flex;
			justify-content: space-around;
			color: #007AFF;
			border: none;
			border-top: 1px #f5f5f5 solid;

			text {
				width: 50%;
			}
		}
	}

	.no_result {
		text-align: center;

		.no_result_txt {
			color: #999;
		}

		image {
			width: 350upx;
			height: 350upx;
		}
	}
</style>
